@function map-set($map, $key, $value) {
    $new: ($key: $value);
    @return map-merge($map, $new);
}

@function to_rem($pixels) {
    $base: 16;
    @if unitless($pixels) and $pixels != 0 {
        @return ($pixels / $base) * 1rem;
    } @else {
        @return $pixels;
    }
}

@mixin size-in-rems($property, $values) {
    $result: ();
    @each $value in $values {
      $result: append($result, to_rem($value));
    }
    /* size in pixels: #{$values} */
    #{$property}: $result;
}

@mixin ellipse {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin font-size($size-in-pixels) {
    @include size-in-rems(font-size, $size-in-pixels);
}

@function base-units($units) {
    $base: 8;
    @return $base * $units * 1px;
}

@mixin respond-to($media) {
	@if $media == ipad {
		@media only screen and (max-width: 1024px) { @content; }
	}
	@else if $media == hidpi {
		@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
			@content;
		}
	}
	@else if $media == screen-xs {
		@media (min-width: 480px) {
			@content;
		}
	}
	@else if $media == screen-sm {
		@media (min-width: 700px) {
			@content;
		}
	}
	@else if $media == screen-md {
		@media (min-width: 992px) {
			@content;
		}
	}
	@else if $media == screen-lg {
		@media (min-width: 1200px) {
			@content;
		}
	}
}

@mixin offscreen-panels($property, $default-value, $small-value) {
    #{$property}: $default-value;
    .has-offscreen-panels & {
        #{$property}: $small-value;
    }
}

@mixin share-icon($x-offset, $y-offset) {
    background-repeat: no-repeat;
    background-position: 15px + $x-offset 12px + $y-offset;
    @include respond-to(screen-sm) {
        background-position: 30px + $x-offset 12px + $y-offset;
    }
}

@mixin settings-row {
    padding: 16px 0;
}

@mixin padding($top, $right, $bottom, $left, $top-small, $right-small, $bottom-small, $left-small) {
    padding: $top-small $right-small $bottom-small $left-small;
    @include respond-to(screen-sm) {
        padding: $top $right $bottom $left;
    }
}

@mixin arrow($x-position, $y-position, $arrow-color, $shadow-color, $origin:left, $invert:false) {
	&:before {
		@if $origin == left {
			left: $x-position;
		}
		@else {
			right: $x-position;
		}
		@if $invert == true {
			border-bottom: 6px solid map-get($shadow-color, day);
		}
		@else {
			border-top: 6px solid map-get($shadow-color, day);
		}
		top: $y-position;
		position: absolute;
		border-right: 6px solid rgba(0, 0, 0, 0);
		border-left: 6px solid rgba(0, 0, 0, 0);
		content: '';
		.theme-dusk & {
			@if $invert == true {
				border-bottom-color: map-get($shadow-color, dusk);
			}
			@else {
				border-top-color: map-get($shadow-color, dusk);
			}
		}
        .theme-sunset & {
            @if $invert == true {
                border-bottom-color: map-get($shadow-color, sunset);
            }
            @else {
                border-top-color: map-get($shadow-color, sunset);
            }
        }
        .theme-midnight & {
            @if $invert == true {
                border-bottom-color: map-get($shadow-color, midnight);
            }
            @else {
                border-top-color: map-get($shadow-color, midnight);
            }
        }
        .theme-auto & {
            @media (prefers-color-scheme: dark) {
                @if $invert == true {
                    border-bottom-color: map-get($shadow-color, dusk);
                }
                @else {
                    border-top-color: map-get($shadow-color, dusk);
                }
            }
        }
		@content;
	}
	&:after {
		@if $origin == left {
			left: $x-position + 1;
		}
		@else {
			right: $x-position + 1;
		}
		@if $invert == true {
			border-bottom: 5px solid map-get($arrow-color, day);
			top: $y-position + 2;
		}
		@else {
			border-top: 5px solid map-get($arrow-color, day);
			top: $y-position;
		}
		position: absolute;
		border-right: 5px solid rgba(0, 0, 0, 0);
		border-left: 5px solid rgba(0, 0, 0, 0);
		content: '';
        .theme-dusk & {
            @if $invert == true {
                border-bottom-color: map-get($arrow-color, dusk);
            }
            @else {
                border-top-color: map-get($arrow-color, dusk);
            }
        }
        .theme-midnight & {
            @if $invert == true {
                border-bottom-color: map-get($arrow-color, midnight);
            }
            @else {
                border-top-color: map-get($arrow-color, midnight);
            }
        }
		.theme-sunset & {
			@if $invert == true {
				border-bottom-color: map-get($arrow-color, sunset);
			}
			@else {
				border-top-color: map-get($arrow-color, sunset);
			}
		}
        .theme-auto & {
            @media (prefers-color-scheme: dark) {
                @if $invert == true {
                    border-bottom-color: map-get($arrow-color, dusk);
                }
                @else {
                    border-top-color: map-get($arrow-color, dusk);
                }
            }
        }
		@content;
	}
}

@mixin centered {
    align-items: center;
    justify-content: center;
    display: flex;
}

// Replace letters
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

// Encode symbols
@function url-encode($string) {
    $map: (
        "%": "%25",
        "<": "%3C",
        ">": "%3E",
        " ": "%20",
        "!": "%21",
        "*": "%2A",
        "'": "%27",
        '"': "%22",
        "(": "%28",
        ")": "%29",
        ";": "%3B",
        ":": "%3A",
        "@": "%40",
        "&": "%26",
        "=": "%3D",
        "+": "%2B",
        "$": "%24",
        ",": "%2C",
        "/": "%2F",
        "?": "%3F",
        "#": "%23",
        "[": "%5B",
        "]": "%5D"
    );

    $new: $string;

    @each $search, $replace in $map {
        $new: str-replace($new, $search, $replace);
    }

    @return $new;
}

// Format the SVG as a URL
@function inline-svg($string) {
    @return url('data:image/svg+xml,#{url-encode($string)}');
}
